<link rel="stylesheet" href="/api-ui/static/bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="/api-ui/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/api-ui/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/api-ui/static/js/vue/vue-3.2.4.global.js"></script>
<script type="text/javascript" src="/api-ui/static/js/vue/axios-0.18.0.min.js"></script>
<script type="text/javascript" src="/api-ui/static/js/vue/axios-helper.js"></script>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/box.css"/>
<link rel="stylesheet" type="text/css" href="/api-ui/static/css/common/checkbox.css"/>

<style type="text/css">
	a {
		color: black;
	}

	a:hover {
		text-decoration: none;
	}

	.bgc-w {
		background-color: #fff;
	}

	.block {
		display: inline-block;
		width: 20px;
	}

	.co {
		color: blue;
	}

	.bl {
		color: black;
	}

	.commen {
		cursor: pointer;
	}
</style>
<div class="row" style="padding-top: 10px;">
	<div class="col-md-2">
		<h1 style="font-size: 24px; margin: 0;" class="">账号管理</h1>
	</div>
	<div class="col-md-10 text-right">
		<a href="##"><span class="glyphicon glyphicon-home"></span> 首页</a> > <a
			disabled="disabled">账号管理</a>
	</div>
</div>
<div class="row" style="padding-top: 15px;" id="app">
	<div class="col-md-12">

		<div class="bgc-w box box-primary thistable">
			<!--盒子头-->
			<div class="box-header">
				<h3 class="box-title">
					<a href="mailaccountadd.html" class="label label-success" style="padding: 5px;">
						<span class="glyphicon glyphicon-plus"></span> 新增
					</a>
				</h3>
				<div class="box-tools">
					<div class="input-group" style="width: 150px;">
						<input type="text" class="form-control input-sm cha"
							   placeholder="账号名查询" v-model="UserName"/>
						<div class="input-group-btn chazhao">
							<a class="btn btn-sm btn-default" :onclick="()=>queryList(UserName)"><span
									class="glyphicon glyphicon-search"></span></a>
						</div>
					</div>
				</div>
			</div>

			<!--盒子身体-->
			<div class="box-body no-padding">
				<div class="table-responsive">
					<table class="table table-hover table-striped">
						<thead>
						<tr>
							<th scope="col" class="commen co">类型<span class="block"></span></th>
							<th scope="col">账号名</th>
							<th scope="col" class="co commen">创建时间<span class="block"></span></th>
							<th scope="col" class="co commen">状态<span class="block"></span></th>
							<th scope="col">操作</th>
						</tr>
						</thead>
						<tbody class="update" v-for="c in context">
						<tr>
							<td><span v-if="c.mailType == 1">系统邮件</span><span v-if="c.mailType == 2">公司邮件</span></td>
							<td><span>{{c.mailUserName}}</span></td>
							<td><span>{{c.mailCreateTime}}</span></td>
							<td><span v-if="c.status == 1" class="label label-success">
				有效
			</span>
								<span v-if="c.status == 2" class="label label-danger">
				无效
			</span>
							</td>
							<td>
								<a :id="c.mailNumberId" onclick="edit(this.id)" class="label xiugai">
									<span class="glyphicon glyphicon-edit"></span> 修改</a>


								<a :onclick="()=>del(c.mailNumberId)"
								   class="label shanchu">
									<span class="glyphicon glyphicon-remove"></span> 删除</a>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
				<!--盒子尾-->
				<div class="box-footer no-padding" style="margin-top: -20px;">
					<div style="padding: 5px;">
						<div id="page"
							 style="background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;">
							<div style="width: 40%; float: left;">
								<div class="pageInfo" style="margin-left: 5px;">
									第<span>{{current}}</span><页></页> | 每页<span>10</span>条
									| 共<span>{{pages}}</span>页
								</div>
							</div>
							<div style="width: 60%; float: left;">
								<div class="pageOperation">
									<!--判断是否是第一页  -->
									<a class="btn btn-sm btn-default no-padding tablefirst"
									   style="width: 30px; height: 20px;"> <span
											:onclick="()=>tablefirst()" class="glyphicon glyphicon-backward"></span></a>
									<a class="btn btn-sm btn-default no-padding tableup"
									   :onclick="()=>tableup()" style="width: 30px; height: 20px;"> <span
											class="glyphicon glyphicon-triangle-left"></span></a>
									<input disabled="disabled" class="btn btn-default no-padding"  v-model="current" value=""
										   style="width: 30px; height: 20px;"/>
									<!--判断是否是最后一页  -->
									<a class="btn btn-sm btn-default no-padding tabledown"
									   :onclick="()=>tabledown()" style="width: 30px; height: 20px;"> <span
											class="glyphicon glyphicon-triangle-right"></span></a>
									<a class="btn btn-sm btn-default no-padding tablelast"
									   :onclick="()=>tablelast()" style="width: 30px; height: 20px;"> <span
											class="glyphicon glyphicon-forward"></span></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<script>
				Vue.createApp({
					data() {
						return {
							current:1,
							context:[],
							UserName:"",
							pages:"",
						}
					},
					methods: {
						del(v) {
							let con = confirm('删除该记录将不能恢复,同时将删除邮箱消息记录,确定删除吗？')
							if (con) {
								requestDelete(
										"/api-core/aoaMailnumber/deleteData",
										{
											id: v
										}).then((resp) => {
											location.href = "mailmanage.html";
										}
								)
							}
						},
						queryList(v) {
							console.info(v);
							requestGet(
									"/api-core/aoaMailnumber/getMailInfo",
									{
										current: this.current,
										name: v
									}
							).then((resp) => {
								console.info("resp", resp);
								this.context = resp.records;
								this.pages = resp.pages;
							})
						},

						tablefirst() {
							if (this.current > 1) {
								this.current = 1;
								this.queryList(this.UserName);
							}
						},
						tabledown() {
							if (this.current < this.pages) {
								this.current=this.current+1;
								this.queryList(this.UserName);
							}
						},
						tableup() {
							if (this.current > 1) {
								this.current=this.current-1;
								this.queryList(this.UserName);
							}
						},
						tablelast() {
							if (this.current < this.pages) {
								this.current = this.pages;
								this.queryList(this.UserName);
							}
						},
					},
					created() {
						this.queryList(null);
					},
				}).mount("#app")

				function edit(v) {
					JSON.stringify(sessionStorage.setItem("mailId", v));
					location.href = "/api-ui/page/mailaccountedit.html";
				}
			</script>
		</div>
	</div>
</div>


